<template>
   <div>

    <!--  表单登录-->
    <body id="poster">
    <el-form class="login-container" label-position="left" label-width="0px">
      <div id="app">
       <timer></timer>
      </div>
      <h3 class="login_title">欢迎使用携不程✈️</h3>
      <el-form-item>
        <el-input v-model="loginForm.phone" type="text" auto-complete="on" placeholder="请输入手机号"></el-input>
      </el-form-item>

      <el-form-item>
        <el-input type="password" v-model="loginForm.password" auto-complete="on" placeholder="请输入密码"
                  @keyup.enter.native=login()></el-input>
      </el-form-item>

      <el-form-item style="width: 100%">
        <el-button type="primary" round  style="width: 100%;border: none" v-on:click="login()">登录
        </el-button>
      </el-form-item>
    </el-form>
    </body>
  </div>
</template>

<script>
import userAction from "../api/userAction";
import cookie from "js-cookie";
import timer from "../components/Timer";
export default {
  components:{
    timer
  },
  name: "login",
  data() {
    return {
      grt: 'hello',
      ho: new Date().getHours(),
      loginForm: {
        username: '',
        password: ''
      },
      responseResult: []
    }
  },
  methods: {

    login() {
      userAction.userLogin(this.loginForm)
        .then(response => {

          console.log(response.data.data.token)

          /**          把token放在localStorage中
           *  sessionStorage.setItem("sbMessage", JSON.stringify(response))
           */
          // window.localStorage.setItem('token', response.data.token);
          // console.log(window.localStorage.getItem("token"))

          //  把token存在cookie中、也可以放在localStorage中
          /// 第一个参数cookie名称，第二个参数值，第三个参数作用范围
          cookie.set('token', response.data.data.token, {domain: 'localhost'})
          cookie.set('token', response.data.data.token, {domain: '127.0.0.1'})

          //  登录成功根据token获取用户信息
          userAction.getUserInfoByToken().then(response => {
            //将用户信息记录cookie
            // JSON.stringify()可以把一个JavaScript对象序列化为一个JSON字符串
            const userInfo = JSON.stringify(response.data.data.userInfo)
            cookie.set('scs_user', userInfo, {domain: 'localhost'})
            cookie.set('scs_user', userInfo, {domain: '127.0.0.1'})
            location.replace("/")
            //强制刷新页面
            //1. this.$router.push('/')
            // this.$router.go(0)
            //2. location.reload()
          })

        })
    },

    getUserIP(onNewIP) {
      let MyPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;

      let pc = new MyPeerConnection({
        iceServers: []

      });

      let noop = () => {
      };

      let localIPs = {};

      let ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g;

      let iterateIP = (ip) => {
        if (!localIPs[ip]) onNewIP(ip);

        localIPs[ip] = true;

      };

      pc.createDataChannel('');

      pc.createOffer().then((sdp) => {
        sdp.sdp.split('\n').forEach(function (line) {
          if (line.indexOf('candidate') < 0) return;

          line.match(ipRegex).forEach(iterateIP);

        });

        pc.setLocalDescription(sdp, noop, noop);

      }).catch((reason) => {
      });

      pc.onicecandidate = (ice) => {
        if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(ipRegex)) return;

        ice.candidate.candidate.match(ipRegex).forEach(iterateIP);

      };

    }




  }
}
</script>

<style scoped>
#poster {
  background: url("../../static/f2.png") no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
}

.login-container {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 150px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  opacity: 0.9;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.login_title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}


</style>
